<template>
  <!-- 计量设备配置计划 -->
  <base-breadcrumb :title="$route.meta.title">
    <searchData :searchData="searchArr" @search="search"></searchData>
    <a-card :bordered="false">
      <list-table ref="table" :loading="loading" tableLayout="fixed" size="default"
                  :columns="columns" :request="loadData"
                  :selectConfig="{ use: true, type: 'checkbox', rowKey: 'id' }" :export-config="{
                            use: true,
                            all: exportConfig.all,
                            select: exportConfig.select,
                        }" :export-config-text="{ select: '导出选中', all: '导出全部' }"
                  :exportPermission="{select: 'qm_061_aexp_06',all: 'qm_061_sexp_05'}"
                  @exportSelect="exportSelect" @exportAll="exportAll">
        <template slot="versionCode" slot-scope="text, record">
          <span v-if="text">
            <a @click="getVersionInfo(record)">{{ text }}</a>
          </span>
        </template>
        <template slot="approvalStatus" slot-scope="text, record">
          <span v-if="record.approvalStatus || record.approvalStatus == '0'">
            {{ getArrayLable(fillingStatusArr,record.approvalStatus) }}
          </span>
        </template>
        <template slot="actions" slot-scope="text, record">
          <MoreButton>
            <span v-btnPermission="'qm_061_loo_03'">
              <a @click="handleManage(0, record)">查看</a>
            </span>
            <span v-btnPermission="'qm_061_edi_01'"
                  v-if="record.approvalStatus == '-1' && hideBuquBtn()">
              <a @click="handleManage(1, record)">填报</a>
            </span>
            <span v-btnPermission="'qm_061_edi_01'"
                  v-if="(record.approvalStatus == '0' || record.approvalStatus == '3') && hideBuquBtn()">
              <a @click="handleManage(2, record)">编辑</a>
            </span>
            <span v-btnPermission="'qm_061_rej_02'"
                  v-if="record.approvalStatus == '2' && hideBuquBtn()">
              <a @click="handleManage(3, record)">更新</a>
            </span>
            <!-- <span v-if="record.approvalStatus == '0' && hideBuquBtn()">
              <a @click="handleDel(record)">删除</a>
            </span> -->
            <span v-btnPermission="'qm_061_exal_04'" v-if="record.approvalStatus != '-1'">
              <a @click="$bus.$emit('showApprovalDetailsDialog', record.id)">审批信息</a>
            </span>
          </MoreButton>
        </template>
      </list-table>
    </a-card>
    <!-- 历史版本信息 -->
    <a-modal title="历史版本信息" v-model="histVersionInfoVisible" width="800px" @cancel="handleCancel"
             :footer="null" :maskClosable="false">
      <a-table rowKey="key" :columns="columnsTwo" :dataSource="dataSourceTwo" :pagination="false">
        <!-- 操作列 -->
        <template slot="actions" slot-scope="text, record">
          <a-button type="link" @click="goVersionDatail(record)">查看详情</a-button>
        </template>
      </a-table>
    </a-modal>
  </base-breadcrumb>
</template>

<script>
import api from '@/api/quality/equipmentConfigurationPlan' // api
import OrgTreeSelect from '@/components/OrgTreeSelect'
import { fillingStatusArr } from '@/views/quality/equipmentManagement/constant/dictionary'
import { getArrayLable } from '@/views/quality/equipmentManagement/constant/getArrayLable'
import handleDownload from '@/views/quality/equipmentManagement/constant/downloadFile.js'
export default {
  name: "equipmentConfigurationPlanList",
  data() {
    return {
      loading: false,
      // 查询参数
      queryParam: {},
      //审批状态sd
      fillingStatusArr,
      editModel: 1,
      exportConfig: {
        all: '计量设备配置计划-导出全部',
        select: '计量设备配置计划-导出选中'
      },
      api,//api
      // 搜索框
      searchArr: [
        {
          name: '填报人',
          type: 'input',
          value: 'fillUserName',
        },
        {
          name: '填报时间',
          type: 'dateRange',
          value: 'fillingTime',
          attr: {
            rangeFormat: ['fillStartDate', 'fillEndDate']
          }
        },
        {
          name: '状态',
          type: 'select',
          value: 'approvalStatus',
          data: fillingStatusArr
        },
      ],
      columns: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          }
        },
        {
          title: '分公司',
          ellipsis: true,
          dataIndex: 'branchCompanyName'
        },
        {
          title: '项目名称',
          ellipsis: true,
          dataIndex: 'projectName'
        },
        {
          title: '版本号',
          dataIndex: 'versionCode',
          scopedSlots: { customRender: 'versionCode' }
        },
        {
          title: '填报时间',
          dataIndex: 'fillInTime'
        },
        {
          title: '填报人',
          dataIndex: 'fillInUserName'
        },
        {
          title: '状态',
          dataIndex: 'approvalStatus',
          scopedSlots: { customRender: 'approvalStatus' }
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '230px',
          fixed: 'right',
          scopedSlots: { customRender: 'actions' }
        }
      ],
      columnsTwo: [
        {
          title: '版本号',
          dataIndex: 'versionCode'
        },
        {
          title: '填报时间',
          dataIndex: 'fillInTime'
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '230px',
          fixed: 'right',
          scopedSlots: { customRender: 'actions' }
        }
      ],
      dataSourceTwo: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let { pageNo, pageSize } = parameter;
        let params = {
          pageNum: pageNo,
          pageSize
        };
        const requestParameters = Object.assign({}, params, { param: this.queryParam })
        this.loading = true;
        return this.api.list(requestParameters).then((res) => {
          this.loading = false;
          if (res.code === '0') {
            return { code: 200, data: res.data?.list, totalSize: res.data?.total }
          }
        }).catch((err) => {
          this.loading = false;
        })
      },
      histVersionInfoVisible: false,//控制弹窗显示状态
    }
  },
  mounted() {
    //不是业务查询模块才展示
    if (this.hideBuquBtn()) {
      this.searchArr.unshift({
        name: '所属单位',
        valueKey: 'searchQuery',
        type: OrgTreeSelect,
      })
    }
  },
  methods: {
    /**
    * @description:导出选中
    * @param {Arrary} data 选中的数据
    */
    exportSelect(data) {
      const idList = data.map(item => item.id)
      const requestParameters = Object.assign({}, { param: this.queryParam })
      requestParameters.param.configProjectIdList = idList;
      handleDownload(this.api.chooseToExport, requestParameters, this.exportConfig.select)
    },
    /**
    * @description:导出全部
    */
    exportAll() {
      handleDownload(this.api.exportAll, { param: this.queryParam }, this.exportConfig.all)
    },
    /**
     * @description:获取数组的label
     */
    getArrayLable,
    /**
    * @description:搜索
    * @param {Object} val 筛选项
    */
    search(val) {
      this.queryParam = { ...val }
      this.$refs.table.refresh()
    },
    /**
     * @description:填报/编辑/更新/查看
    * @param {Number} type 1:填报 2:编辑 3:更新 0:查看
    * @param {Object} record 当前行数据
     */
    handleManage(type, record) {
      this.editModel = type
      let query = {
        editModel: type,
        id: record.id,
        approvalStatus: record.approvalStatus
      }
      if (record.versionId) {
        query.versionId = record.versionId
      }
      this.$router.push({
        name: 'equipmentConfigurationPlanInfo',
        query
      })
    },
    /**
      * @description:删除
      * @param {Object} record 当前行数据
      */
    handleDel(record) {
      let that = this
      that.$confirm({
        title: '温馨提示',
        content: `确认删除？`,
        okText: '确认',
        cancelText: '关闭',
        onOk() {
          that.api
            .delete({ versionId: record.versionId })
            .then((res) => {
              if (res.code === '0') {
                that.$message.success('删除成功！')
                that.$refs.table.refresh(true)
              }
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },
    /**
    * @description:查看版本信息
    * @param {Object} record 当前行数据
    */
    async getVersionInfo(record) {
      this.dataSourceTwo = [];
      this.histVersionInfoVisible = true;
      let res = await this.api.queryHistoryVersion({ versionId: record.versionId, id: record.id });
      if (res.code === '0') {
        this.dataSourceTwo = res.data;
      }
    },
    /**
     * @description:关闭历史记录弹窗
     */
    handleCancel() {
      this.histVersionInfoVisible = false
    },
    /**
    * @description:查看历史版本详情信息
    * @param {Object} record 当前行数据
    */
    goVersionDatail(record) {
      this.handleManage(0,
        {
          id: record.mdConfigProjectId,
          versionId: record.id,
          approvalStatus: record.approvalStatus
        }
      )
      this.handleCancel();
    }
  }
}
</script>

<style>
</style>